<template>
    <div class="page_container pages">
        <div class="msgTop"></div>
        <div class="userInfo">
            <img src="../../../images/Group 126@2x.png">
            <span>{{userName}}</span>
        </div>
        <div class="wraper_border flex flexSpaceA content flexRow">
            <div @click="clickToPage('1')">
                <img src="../../../images/Group 122.png" alt="">
                <span>{{money}}</span>
                <span>余额</span>
            </div>
            <div @click="clickToPage('2')">
                <img src="../../../images/coupon.png" alt="">
                <span>{{quan}}</span>
                <span>优惠券</span>
            </div>
            <div @click="clickToPage('3')">
                <img src="../../../images/payment-icon.png" alt="">
                <span>{{card}}</span>
                <span>银行卡</span>
            </div>
        </div>
    </div>
</template>
<script>
import { getUserAmt, queryCouponUsableCount,getBankCardList } from 'request';
export default {
    name:'wallet',
    data(){
        return {
            userName:'dddd',
            money:'--',
            quan:'--',
            card:'0'
        }
    },
    created(){
        this.$store.commit("increment", "我的钱包");
        this.getMoney();//获取余额
        this.queryCouponUsableCount();//获取优惠券数量
        this.getBankList();
    },
    methods:{
        getMoney(){
            getUserAmt({}).then((res)=>{
                if (res.data.result == "0000") {
                    this.money = res.data.amt || '--';
                }
            })
        },
        getBankList(){
            getBankCardList({}).then(res => {
                this.$vux.loading.hide()
                if(res.rspCode == '0000'){
                    this.card = res.data.userBankCard.length || '0';
                }else{
                    Toast({ message: '获取银行卡列表失败',position: 'middle',duration: 3000});
                }
            }).catch(error => {
                console.log(error);
                this.$vux.loading.hide();
            } );
        },
        queryCouponUsableCount(){
            queryCouponUsableCount({}).then(res=>{
                if(res.rspCode == '0000'){
                    this.quan = res.data.count || '--';
                }
            })
        },
        clickToPage(type){
            if(type == '1'){
                this.$router.push({
                    path: "/drawCash"
                });
            }else if(type == '2'){
                this.$router.push({
                    path: "/Myvouchers"
                });
            }else{
                this.$router.push({
                    path: "/BankList"
                });
            }
        }
    }
}
</script>
<style lang='less' scoped>
.pages{
    padding-top:0rem !important;
}
.msgTop{
    width: 100%;
    height: 130px;
    background: url(../../../images/Rectangle309@2x.png) no-repeat;
}
.userInfo{
    width:100%;
    height:150px;
    display:flex;
    align-items: center;
    flex-direction:column;
    margin-top:-80px;
    span{
        font-size:18px;
        color:black;
        margin-top:18px;
        font-weight:600;
    }
}
.content{
    padding:1rem 1rem 2rem;
    margin-top:2rem;
    &>div{
        width:26%;
        display:flex;
        flex-direction: column;
        align-items:center;
        &>img{
            position:relative;
            top:-2rem;
            width:2.6rem;
            height:2.6rem;
        }
        &>span:nth-child(2){
            font-size:3rem;
            font-weight:bold;
            margin-bottom:1rem;
        }
        &>span:nth-child(3){
            font-size:1.4rem;
            color:'#8f8f91';
        }
    }
}
</style>

